<template>
    <div class="login">
        <!-- 登陆表单 -->
        <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="ruleFormRef">
            <!-- 标题 -->
            <h3 class="title">博客后台管理系统</h3>
            <!-- 账户 -->
            <el-form-item porp="username">
                <el-input type="text" size="large" placeholder="请输入账号" v-model="loginForm.username">
                    <template #prefix>
                        <svg-icon icon-class="user" />
                    </template>
                </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input type="password" show-password size="large" placeholder="请输入密码" v-model="loginForm.password"
                    @keyup.enter="handleLogin(ruleFormRef)">
                    <template #prefix>
                        <svg-icon icon-class="password" />
                    </template>
                </el-input>
            </el-form-item>
            <!-- 登陆按钮 -->
            <el-form-item>
                <el-button :loading="loading" type="primary" style="width: 100%"
                    @click.prevent="handleLogin(ruleFormRef)">
                    <span v-if="!loading">登陆</span>
                    <span v-else>登陆中...</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2022 - {{ new Date().getFullYear() }} By Ikaros </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { LoginForm } from "@/api/login/types";
import type { FormInstance, FormRules } from "element-plus";
import { reactive, ref } from "vue";
import useStore from "@/stores";
import router from "@/router";

const loading = ref(false);
const ruleFormRef = ref<FormInstance>();
const { user } = useStore();
const loginForm = reactive<LoginForm>({
    username: "test@qq.com",
    password: "123456",
});

const loginRules = reactive<FormRules>({
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码不能少于6位", trigger: "blur" }],
});

// 登陆方法
const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: boolean)=> {
        if (valid) {
            loading.value = true;
            user.LogIn(loginForm).then(()=> {
                router.push("/");
                loading.value = false;
            }).catch(()=> {
                loading.value = false;
            })
        }
    });
}

</script>

<style lang="scss" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("@/assets/images/login-bg.png");
    background-size: cover;
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
</style>
